<template>
	<uni-nav-bar title="车用报销" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar rightText="报销记录"
		@clickRight="navTo('Sale/reimbursement/reimbursementList')"></uni-nav-bar>
	<view class="package_sale">
		<view>
			<view class="title">日期：</view>
			<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @change="maskClick" />
		</view>
		<view>
			<view class="title">费用：</view>
			<input class="uni-input" type="number" v-model="money" placeholder="0.00" @input="inputeve" />
		</view>
		<view>
			<view class="title">事由：</view>
			<textarea class="textarea" v-model="content" placeholder="请填写事由" auto-height></textarea>
		</view>
		<view>
			<view class="title">图片：</view>
			<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1" />
		</view>
	</view>
	<view class="add" @click="submit()">确认</view>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import mkUpload from "@c/mk-upload/mk-upload.vue"
	import { showLoading, errorToast, successToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { nextTick, ref } from 'vue';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const single = ref('')
	const content = ref('')
	const money = ref('')
	// 上传图片
	const imgList = ref([])
	const image = ref('')
	// 上传图片
	function onChoose(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload2',
			filePath: e.tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				// 根据接口具体返回格式   赋值具体对应url
				imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
				image.value = JSON.parse(uploadFileRes.data).data.url
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	// 删除图片
	function onDelete() {
		imgList.value = []
	}
	function maskClick(e : any) {
		console.log(JSON.stringify(e))
		single.value = e
	}
	/**
	 * 输入的金额
	 */
	function inputeve(e) {
		let val = e.detail.value.replace(/(^\s*)|(\s*$)/g, '');
		if (!val) {
			money.value = '';
			return;
		}
		val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
		nextTick(function () {
			money.value = val;
		});
	}
	//提交
	function submit() {
		if (!single.value) {
			errorToast('请选择日期')
			return
		}
		if (imgList.value.length < 1) {
			errorToast('请上传凭证')
			return
		}
		if (!money.value) {
			errorToast('请输入报销金额')
			return
		}
		submitExpense()
	}
	//报销
	function submitExpense() {
		showLoading('正在加载');
		const payload = {
			staff_id,
			day: single.value,
			money: money.value,
			content: content.value,
			image: image.value
		};
		toPublish('staff/addBaoxiao', payload, (obj : any) => {
			uni.hideLoading();
			const { code, msg } = obj;
			if (code === 1) {
				single.value = ''
				imgList.value = []
				money.value = ''
				content.value = ''
				successToast(msg)
				setTimeout(() => {
					navTo('Sale/reimbursement/reimbursementList')
				}, 1000)
			} else {
				errorToast(msg)
			}
		});
	}
</script>

<style scoped lang="less">
	.add {
		width: 480rpx;
		height: 100rpx;
		background: linear-gradient(-10deg, #2C96F9, #1B91FF);
		border-radius: 5px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 20rpx auto;
		font-size: 32rpx;
	}

	input {
		width: 100%;
		background: #eee;
		padding: 15rpx;
		height: 72rpx;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.title {
		margin: 20rpx 0px;
	}
</style>
<style>
	.package_sale>>>.textarea {
		width: 100%;
		background: #eee;
		padding: 15rpx;
		box-sizing: border-box;
		border-radius: 5px;
	}
</style>